<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Edstudy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="shortcut icon" type="image/x-icon" th:href="@{/bk/img/favicon.png}">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="stylesheet" th:href="@{/bk/css/bootstrap.min.css}">
        <link rel="stylesheet" th:href="@{/bk/css/animate.min.css}">
        <link rel="stylesheet" th:href="@{/bk/css/magnific-popup.css}">
        <link rel="stylesheet" th:href="@{/bk/css/fontawesome-all.min.css}">
        <link rel="stylesheet" th:href="@{/bk/css/owl.carousel.min.css}">
        <link rel="stylesheet" th:href="@{/bk/css/jquery-ui.min.css}">
        <link rel="stylesheet" th:href="@{/bk/css/flaticon.css}">
        <link rel="stylesheet" th:href="@{/bk/css/odometer.css}">
        <link rel="stylesheet" th:href="@{/bk/css/aos.css}">
        <link rel="stylesheet" th:href="@{/bk/css/slick.css}">
        <link rel="stylesheet" th:href="@{/bk/css/default.css}">
        <link rel="stylesheet" th:href="@{/bk/css/style.css}">
        <link rel="stylesheet" th:href="@{/bk/css/responsive.css}">
        <script type="text/javascript" th:src="@{/bootstrap-4.5.0-dist/js/jquery-3.2.1.slim.min.js}"></script>
        <script type="text/javascript" th:src="@{/bootstrap-4.5.0-dist/js/bootstrap.js}"></script>
        <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-4.5.0-dist/css/bootstrap.css}">

        <style type="text/css">
            .download{
                width: 800px;
                height: 500px;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            .download::-webkit-scrollbar{
                display: none;
            }
        </style>
        <script  language="javascript" type="text/javascript"  th:inline="javascript">
            onload=function(){
                var filemsg =  [[${filemsg}]];
                if(filemsg){
                    alert(filemsg);
                }
            };
        </script>
    </head>
    <body>


        <!-- preloader  -->
        <div id="preloader">
            <div id="ctn-preloader" class="ctn-preloader">
                <div class="animation-preloader">
                    <div class="spinner"></div>
                    <div class="txt-loading">
                        <span data-text-preloader="E" class="letters-loading">
                            E
                        </span>
                        <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                        <span data-text-preloader="S" class="letters-loading">
                            S
                        </span>
                        <span data-text-preloader="T" class="letters-loading">
                            T
                        </span>
                        <span data-text-preloader="U" class="letters-loading">
                            U
                        </span>
                        <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                        <span data-text-preloader="Y" class="letters-loading">
                            Y
                        </span>
                    </div>
                </div>
                <div class="loader">
                    <div class="row">
                        <div class="col-3 loader-section section-left">
                            <div class="bg"></div>
                        </div>
                        <div class="col-3 loader-section section-left">
                            <div class="bg"></div>
                        </div>
                        <div class="col-3 loader-section section-right">
                            <div class="bg"></div>
                        </div>
                        <div class="col-3 loader-section section-right">
                            <div class="bg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- preloader end -->


		<!-- Scroll-top -->
        <button class="scroll-top scroll-to-target" data-target="html">
            <i class="fas fa-angle-up"></i>
        </button>
        <!-- Scroll-top-end-->


        <!-- header-area -->
        <header>
            <div class="header-top-wrap d-none d-md-block">
                <div class="container-fluid container-full">
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="header-top-library">
                                    <a href="#">Library us<i class="fas fa-angle-down"></i></a>
                                </div>
                                <div class="header-top-search">
                                    <form action="#">
                                        <input type="text" placeholder="Search...">
                                        <button><i class="fas fa-search"></i></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="header-right-list">
                                <div class="header-top-social">
                                    <ul>
                                        <li>
                                            你好,[[${session.userlogin}]]<span th:text="${session.userrole}==2?'【老师用户】':'【学生用户】'"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="header-user-login">
                                    <a href="/loginOut"><i class="fas fa-user-circle"></i>退出</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sticky-header" class="main-header menu-area transparent-header">
                <div class="container-fluid container-full">
                    <div class="row">
                        <div class="col-12">
                            <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                            <div class="menu-wrap">
                                <nav class="menu-nav show">
                                    <div class="logo">
                                        <a href="index.html">
                                            <img th:src="@{/bk/img/logo/logo.png}" class="logo-sticky-none" alt="Logo">
                                            <img th:src="@{/bk/img/logo/logo_2.png}" class="logo-sticky-block" alt="Logo">
                                        </a>
                                    </div>
                                    <div class="navbar-wrap main-menu d-none d-lg-flex">
                                        <ul class="navigation">
                                            <li class="active current dropdown"><a href="#">Home</a>
                                                <ul class="submenu">
                                                    <li class="active"><a href="index.html">Home One</a></li>
                                                    <li><a href="index-2.html">Home Two</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="about-us.html">About</a></li>
                                            <li><a href="event.html">Events</a></li>
                                            <li class="current"><a href="courses.html">Courses</a></li>
                                            <li class="current"><a href="shop.html">SHOP</a></li>
                                            <li class="current dropdown"><a href="#">blog</a>
                                                <ul class="submenu">
                                                    <li><a href="blog.html">Our Blog</a></li>
                                                    <li><a href="blog-details.html">Blog Details</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">contacts</a></li>
                                        </ul>
                                    </div>
                                    <div class="header-action d-none d-md-block">
                                        <ul>
                                            <li class="header-shop-cart"><a href="#"><i class="fas fa-shopping-basket"></i><span>0</span></a>
                                                <ul class="minicart">
                                                    <li class="d-flex align-items-start">
                                                        <div class="cart-img">
                                                            <a href="#">
                                                                <img th:src="@{/bk/img/product/cart_p01.jpg}" alt="">
                                                            </a>
                                                        </div>
                                                        <div class="cart-content">
                                                            <h4>
                                                                <a href="#">Charity Nike Brand Yellow T-Shirt</a>
                                                            </h4>
                                                            <div class="cart-price">
                                                                <span class="new">$229.9</span>
                                                                <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="del-icon">
                                                            <a href="#">
                                                                <i class="far fa-trash-alt"></i>
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li class="d-flex align-items-start">
                                                        <div class="cart-img">
                                                            <a href="#">
                                                                <img th:src="@{/bk/img/product/cart_p02.jpg}" alt="">
                                                            </a>
                                                        </div>
                                                        <div class="cart-content">
                                                            <h4>
                                                                <a href="#">BackPack For School Student</a>
                                                            </h4>
                                                            <div class="cart-price">
                                                                <span class="new">$229.9</span>
                                                                <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="del-icon">
                                                            <a href="#">
                                                                <i class="far fa-trash-alt"></i>
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="total-price">
                                                            <span class="f-left">Total:</span>
                                                            <span class="f-right">$239.9</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="checkout-link">
                                                            <a href="#">Shopping Cart</a>
                                                            <a class="red-color" href="#">Checkout</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-btn"><a href="#" class="btn">Free month</a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <!-- Mobile Menu  -->
                            <div class="mobile-menu">
                                <div class="menu-backdrop"></div>
                                <div class="close-btn"><i class="fas fa-times"></i></div>

                                <nav class="menu-box">
                                    <div class="nav-logo"><a href="index.html"><img th:src="@{/bk/img/logo/logo.png}" alt="" title=""></a></div>
                                    <div class="menu-outer">
                                        <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                                    </div>
                                    <div class="social-links">
                                        <ul class="clearfix">
                                            <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                            <li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
                                            <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                            <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                            <li><a href="#"><span class="fab fa-youtube"></span></a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <!-- End Mobile Menu -->
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header-area-end -->

        <!-- main-area -->
        <main>

            <!-- banner-area -->
            <section class="banner-area banner-bg">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-10">
                            <div class="banner-content text-center">
                                <h2 class="wow fadeInUp" data-wow-delay=".3s">program <span>DATA</span> SCIENCE</h2>
                                <p class="wow fadeInUp" data-wow-delay=".6s">Courses and instructors have moved to Program In Learning</p>
                                <div class="banner-btn">
                                    <a href="#" class="btn wow fadeInLeft" data-wow-delay=".9s"><span>+</span> Unlimited Access</a>
                                    <a href="#" class="btn transparent-btn wow fadeInRight" data-wow-delay=".9s">Free month</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="banner-shape wow zoomIn" data-wow-delay="1.2s"><img th:src="@{/bk/img/slider/banner_shape.png}" alt=""></div>
            </section>
            <!-- banner-area-end -->

            <!-- courses-area -->
            <section class="courses-area fix pt-110">
                <div align="center">
                <div id="upload" th:hidden="${session.userrole}==1?true:false">
                    <h3>资料上传区</h3>
                    <form method="post" enctype="multipart/form-data" th:action="@{/upload}">
                        <input type="file" name="file">
                        <button class="btn btn-outline-secondary" type="submit">上传</button>
                    </form>
                </div>
                <br>
                <h3>资料下载区</h3>
                <div class="download row" >

                    <table class="table table-hover" th:width="800px" style="margin: 0 auto">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="f : ${fileList}">
                            <td th:text="${f.getFilename()}"></td>
                            <td>
                                <a class="btn btn-sm btn-primary" th:href="@{/download/{filename}(filename=${f.getFilename()})}">下载</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                </div>
                <br><br><br><br>
                <div class="courses-overlay-text">lessons</div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-7 col-lg-9">
                            <div class="section-title text-center mb-70">
                                <h2>Online Coaching Lessons <span>For Remote</span> Learning<span>.</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysettin</p>
                            </div>
                        </div>
                    </div>
                    <div class="row no-gutters courses-masonry">
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img01.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">Software Development</a></h4>
                                    <span>Over 800 Courses</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img02.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">3D + Animation</a></h4>
                                    <span>Over 100 Courses</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img04.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i
                                            class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">Business Development</a></h4>
                                    <span>Over 350 Courses</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img05.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">Audio + Music</a></h4>
                                    <span>Over 350 Courses</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img06.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">Audio + Music</a></h4>
                                    <span>Over 350 Courses</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 grid-item grid-sizer">
                            <div class="courses-item mb-20">
                                <div class="courses-thumb">
                                    <img th:src="@{/bk/img/courses/courses_img03.jpg}" alt="">
                                </div>
                                <div class="courses-content">
                                    <a href="#" class="popup-video courses-preview"><i
                                            class="flaticon-play-arrow"></i>Preview subject</a>
                                    <h4><a href="#">Web Development</a></h4>
                                    <span>Over 100 Courses</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="courses-shape"><img th:src="@{/bk/img/courses/courses_shape01.png}" alt=""></div>
                <div class="courses-shape courses-shape-2"><img th:src="@{/bk/img/courses/courses_shape02.png}" alt=""></div>
            </section>
            <!-- courses-area-end -->

            <!-- ingredients-area -->
            <section class="ingredients-area pt-100 pb-120">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="section-title">
                                <span class="sub-title">ingredients</span>
                                <h2>Learning Paths <span>For Remote</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysetting industry. Lorem Ipsum has been the industry's standard
                                dummy.</p>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="ingredients-progress">
                                <div class="ing-progress-wrap">
                                    <div class="ing-progress-top">
                                        <span>COURSES - WEEKLY</span>
                                        <span>94%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar wow slideInLeft" data-wow-delay=".2s" role="progressbar" style="width: 94%;" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ing-progress-wrap">
                                    <div class="ing-progress-top">
                                        <span>MARKETING</span>
                                        <span>50%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar wow slideInLeft" data-wow-delay=".4s" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ing-progress-wrap">
                                    <div class="ing-progress-top">
                                        <span>ADVERTISEMENTS</span>
                                        <span>75%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar wow slideInLeft" data-wow-delay=".6s" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- ingredients-area-end  -->

            <!-- features-area -->
            <section class="features-area gray-bg pt-110 pb-90">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-7 col-lg-9">
                            <div class="section-title text-center mb-70">
                                <h2>Choose What You'd <span>Like to Learn</span> Our Extensive<span>.</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysettin</p>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-lg-4 col-md-6">
                            <div class="features-item mb-30">
                                <div class="features-inner">
                                    <div class="features-icon">
                                        <i class="flaticon-study"></i>
                                    </div>
                                    <div class="features-content">
                                        <h3>Essential Training Access</h3>
                                        <p>Lorem ipsum dolor sitam consecteur adipisci. Aenean thats egesta magna porttitor vehicula nullam</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="features-item mb-30">
                                <div class="features-inner">
                                    <div class="features-icon">
                                        <i class="flaticon-university"></i>
                                    </div>
                                    <div class="features-content">
                                        <h3>Programming Foundations</h3>
                                        <p>Lorem ipsum dolor sitam consecteur adipisci. Aenean thats egesta magna porttitor vehicula nullam</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="features-item mb-30">
                                <div class="features-inner">
                                    <div class="features-icon">
                                        <i class="flaticon-pencil"></i>
                                    </div>
                                    <div class="features-content">
                                        <h3>Python Data Analysis</h3>
                                        <p>Lorem ipsum dolor sitam consecteur adipisci. Aenean thats egesta magna porttitor vehicula nullam</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- features-area-end -->

            <!-- top-courses -->
            <section class="top-courses pt-110 pb-70">
                <div class="courses-overlay-text">Top Courses</div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-7 col-lg-9">
                            <div class="section-title text-center mb-70">
                                <h2>Browse Our Top Courses <span>For Remote</span> Learning<span>.</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysettin</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="courses-menu mb-40">
                                <button class="active" data-filter="*">All Courses</button>
                                <button class="" data-filter=".cat-one">Business</button>
                                <button class="" data-filter=".cat-two">Design</button>
                                <button class="" data-filter=".cat-three">Developer</button>
                                <button class="" data-filter=".cat-four">Photography</button>
                                <button class="" data-filter=".cat-five">Marketing</button>
                            </div>
                        </div>
                    </div>
                    <div class="row top-courses-active">
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-three cat-four cat-two">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb01.jpg" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Development</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">4.3 <span>(6,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Mark Wiens</a></li>
                                            <li class="courses-price">$18.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-one cat-four cat-five">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb02.jpg" alt=""></a>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Python Bootcamp</a></span>
                                    </div>
                                    <h5><a href="#">Complete Python Bootcamp: Go from zero</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">3.4 <span>(4,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Jose Portilla</a></li>
                                            <li class="courses-price">$10.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-two cat-three">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb03.jpg" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Development</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">4.4 <span>(4,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Jose Portilla</a></li>
                                            <li class="courses-price">$09.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-one  cat-five">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb04.jpg" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Design</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">5.0 <span>(9,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Tomas Alu</a></li>
                                            <li class="courses-price">$11.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-two cat-four cat-five">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb05.jpg" alt=""></a>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Development</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">4.3 <span>(6,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Mark Wiens</a></li>
                                            <li class="courses-price">$18.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-one cat-three">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img src="img/courses/top_courses_thumb06.jpg" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Python Bootcamp</a></span>
                                    </div>
                                    <h5><a href="#">Complete Python Bootcamp: Go from zero</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">3.4 <span>(4,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Jose Portilla</a></li>
                                            <li class="courses-price">$10.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-two cat-four cat-one">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img th:src="@{/bk/img/courses/top_courses_thumb07.jpg}" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Development</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">4.4 <span>(4,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Jose Portilla</a></li>
                                            <li class="courses-price">$09.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6 grid-item grid-sizer cat-three cat-five">
                            <div class="top-courses-item mb-50">
                                <div class="top-courses-thumb">
                                    <a href="#"><img th:src="@{/bk/img/courses/top_courses_thumb08.jpg}" alt=""></a>
                                    <div class="bestseller">Bestseller</div>
                                </div>
                                <div class="top-courses-content">
                                    <div class="top-courses-tag">
                                        <span>In <a href="#">Web Design</a></span>
                                    </div>
                                    <h5><a href="#">The Data Science Course Develop Complete Data</a></h5>
                                    <div class="top-courses-rating">
                                        <ul>
                                            <li class="rating-star">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </li>
                                            <li class="rating-point">5.0 <span>(9,151)</span></li>
                                        </ul>
                                    </div>
                                    <div class="top-courses-bottom">
                                        <ul>
                                            <li class="courses-avatar">By <a href="#">Tomas Alu</a></li>
                                            <li class="courses-price">$11.00</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- top-courses-end -->

            <!-- cta-area -->
            <section class="cta-area cta-bg">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="section-title white-title text-center mb-15">
                                <h2>Get <span>Personalized</span> All Categories Recommendations<span>.</span></h2>
                                <p>Answer a few questions for your top picks of the printing</p>
                            </div>
                            <div class="cta-btn text-center">
                                <a href="#" class="btn"><span>+</span> Start Teaching Today</a>
                                <a href="#" class="btn transparent-btn">get started</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- cta-area-end -->

            <!-- testimonial-area -->
            <section class="testimonial-area testimonial-bg pt-110 pb-120">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-7 col-lg-9">
                            <div class="section-title text-center mb-70">
                                <h2>Feedback Our Successful <span>Students</span> Learning<span>.</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysettin</p>
                            </div>
                        </div>
                    </div>
                    <div class="row testimonial-active">
                        <div class="col-xl-4">
                            <div class="testimonial-item">
                                <div class="testimonial-quote">
                                    <svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
                                        <g>
                                            <polygon points="0,4 0,28 12,16 12,4" />
                                            <polygon points="20,4 20,28 32,16 32,4" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="testi-content">
                                    <p>A foodbank is a non-profit tha charitable organization that distributes food those who have difficulty
                                        purchasing enough to avoid hunger.</p>
                                    <div class="testi-avatar-wrap">
                                        <div class="testi-avatar-img">
                                            <img th:src="@{/bk/img/images/testi_avatar01.png}" alt="">
                                        </div>
                                        <div class="testi-avatar-info">
                                            <h6>Thomas Alexander</h6>
                                            <span>Co - Public Relation</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="testimonial-item">
                                <div class="testimonial-quote">
                                    <svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
                                        <g>
                                            <polygon points="0,4 0,28 12,16 12,4" />
                                            <polygon points="20,4 20,28 32,16 32,4" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="testi-content">
                                    <p>A foodbank is a non-profit tha charitable organization that distributes food those who have difficulty
                                        purchasing enough to avoid hunger.</p>
                                    <div class="testi-avatar-wrap">
                                        <div class="testi-avatar-img">
                                            <img th:src="@{/bk/img/images/testi_avatar02.png}" alt="">
                                        </div>
                                        <div class="testi-avatar-info">
                                            <h6>Emily Dickinson.</h6>
                                            <span>Co - Public Relation</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="testimonial-item">
                                <div class="testimonial-quote">
                                    <svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
                                        <g>
                                            <polygon points="0,4 0,28 12,16 12,4" />
                                            <polygon points="20,4 20,28 32,16 32,4" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="testi-content">
                                    <p>A foodbank is a non-profit tha charitable organization that distributes food those who have difficulty
                                        purchasing enough to avoid hunger.</p>
                                    <div class="testi-avatar-wrap">
                                        <div class="testi-avatar-img">
                                            <img th:src="@{/bk/img/images/testi_avatar03.png}" alt="">
                                        </div>
                                        <div class="testi-avatar-info">
                                            <h6>Marline Wilson.</h6>
                                            <span>Co - Public Relation</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="testimonial-item">
                                <div class="testimonial-quote">
                                    <svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
                                        <g>
                                            <polygon points="0,4 0,28 12,16 12,4" />
                                            <polygon points="20,4 20,28 32,16 32,4" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="testi-content">
                                    <p>A foodbank is a non-profit tha charitable organization that distributes food those who have difficulty
                                        purchasing enough to avoid hunger.</p>
                                    <div class="testi-avatar-wrap">
                                        <div class="testi-avatar-img">
                                            <img th:src="@{/bk/img/images/testi_avatar02.png}" alt="">
                                        </div>
                                        <div class="testi-avatar-info">
                                            <h6>Roshan Nikkum.</h6>
                                            <span>Public Relation</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- testimonial-area-end -->

            <!-- Blog-area -->
            <section class="blog-area pt-110 pb-90">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-7 col-lg-9">
                            <div class="section-title text-center mb-70">
                                <h2>Our Latest <span>News</span> Articles<span>.</span></h2>
                                <p>Ritamin Ipsum is simply dummy text of the printing and tysettin</p>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-post-item mb-30">
                                <div class="blog-post-thumb position-relative">
                                    <a href="blog-details.html"><img th:src="@{/bk/img/blog/blog_post_thumb01.jpg}" alt=""></a>
                                    <a href="#" class="blog-post-tag"><i class="fas fa-tag"></i>Education</a>
                                </div>
                                <div class="blog-post-content">
                                    <div class="blog-post-meta">
                                        <ul>
                                            <li><i class="far fa-user"></i><a href="#">Admin</a></li>
                                            <li><i class="far fa-calendar-alt"></i>OCTOBER 23, 2020</li>
                                        </ul>
                                    </div>
                                    <h4><a href="blog-details.html">Foundations Real-World Examples</a></h4>
                                    <p>Lorem ipsum dolor sitam consecur adipis enean thats egesta magna porttitor vehicula.</p>
                                    <a href="#" class="arrow-btn">Read More <span></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-post-item mb-30">
                                <div class="blog-post-thumb position-relative">
                                    <a href="blog-details.html"><img th:src="@{/bk/img/blog/blog_post_thumb02.jpg}" alt=""></a>
                                    <a href="#" class="blog-post-tag"><i class="fas fa-tag"></i>training</a>
                                </div>
                                <div class="blog-post-content">
                                    <div class="blog-post-meta">
                                        <ul>
                                            <li><i class="far fa-user"></i><a href="#">Admin</a></li>
                                            <li><i class="far fa-calendar-alt"></i>OCTOBER 23, 2020</li>
                                        </ul>
                                    </div>
                                    <h4><a href="blog-details.html">Python Essential Training Examples</a></h4>
                                    <p>Lorem ipsum dolor sitam consecur adipis enean thats egesta magna porttitor vehicula.</p>
                                    <a href="#" class="arrow-btn">Read More <span></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="blog-post-item mb-30">
                                <div class="blog-post-thumb position-relative">
                                    <a href="blog-details.html"><img th:src="@{/bk/img/blog/blog_post_thumb03.jpg}" alt=""></a>
                                    <a href="#" class="blog-post-tag"><i class="fas fa-tag"></i>creative</a>
                                </div>
                                <div class="blog-post-content">
                                    <div class="blog-post-meta">
                                        <ul>
                                            <li><i class="far fa-user"></i><a href="#">Admin</a></li>
                                            <li><i class="far fa-calendar-alt"></i>OCTOBER 23, 2020</li>
                                        </ul>
                                    </div>
                                    <h4><a href="blog-details.html">Programming Foundations World</a></h4>
                                    <p>Lorem ipsum dolor sitam consecur adipis enean thats egesta magna porttitor vehicula.</p>
                                    <a href="#" class="arrow-btn">Read More <span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Blog-area-end -->

        </main>
        <!-- main-area-end -->


        <!-- footer-area -->
        <footer>
            <div class="footer-top black-bg pt-95 pb-45">
                <div class="container-fluid container-full">
                    <div class="row justify-content-between">
                        <div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-25">
                                    <h5>About Us</h5>
                                </div>
                                <div class="fw-text">
                                    <p>Arwhal pop intellientsia pinterest microdosing tilde cloud bread gochujang.</p>
                                    <div class="footer-contact-list mt-20">
                                        <ul>
                                            <li>732/21 King Street,Kingston United Kingdom</li>
                                            <li>1-577-245-658742</li>
                                            <li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4aba2a2ada7a184a1bca5a9b4a8a1eaa7aba9">[email&#160;protected]</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-4 col-md-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-25">
                                    <h5>Quick Links</h5>
                                </div>
                                <div class="fw-links">
                                    <ul>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Portfolio</a></li>
                                        <li><a href="#">Blog</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-25">
                                    <h5>Popular Courses</h5>
                                </div>
                                <div class="footer-courses">
                                    <ul>
                                        <li>
                                            <div class="f-courses-thumb">
                                                <a href="#"><img th:src="@{/bk/img/courses/f_courses_thumb01.jpg}" alt=""></a>
                                            </div>
                                            <div class="f-courses-content">
                                                <h5><a href="#">Access 2016 Essential Training Training Examples</a></h5>
                                                <span>Tonoy Pueyo</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="f-courses-thumb">
                                                <a href="#"><img th:src="@{/bk/img/courses/f_courses_thumb02.jpg}" alt=""></a>
                                            </div>
                                            <div class="f-courses-content">
                                                <h5><a href="#">Python Programming Essential Training Examples</a></h5>
                                                <span>Mark Wiens</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-25">
                                    <h5>Twitter Feed</h5>
                                </div>
                                <div class="fw-tweet-post">
                                    <ul>
                                        <li>
                                            <i class="fab fa-twitter"></i>
                                            <div class="fw-tweet-post-content">
                                                <p>Here comes <a href="#">https://t.ew/ARkjsdsd</a>
                                                    This stellar #theme is made for any type of</p>
                                                <span>3 months ago</span>
                                            </div>
                                        </li>
                                        <li>
                                            <i class="fab fa-twitter"></i>
                                            <div class="fw-tweet-post-content">
                                                <p>Here comes <a href="#">https://t.ew/ARkjsdsd</a>
                                                    This stellar #theme is made for any type of modern… <a
                                                        href="#">https://t.ew/ARkjsdsd</a></p>
                                                <span>3 months ago</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright-area">
                <div class="container-fluid container-full">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="copyright-text">
                                <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="payment-method-img text-center text-md-right">
                                <img th:src="@{/bk/img/images/payment_method_img.png}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-area-end -->





		<!-- JS here -->
        <script th:src="@{/bk/js/vendor/jquery-3.5.0.min.js}"></script>
        <script th:src="@{/bk/js/popper.min.js}"></script>
        <script th:src="@{/bk/js/bootstrap.min.js}"></script>
        <script th:src="@{/bk/js/isotope.pkgd.min.js}"></script>
        <script th:src="@{/bk/js/imagesloaded.pkgd.min.js}"></script>
        <script th:src="@{/bk/js/jquery.magnific-popup.min.js}"></script>
        <script th:src="@{/bk/js/owl.carousel.min.js}"></script>
        <script th:src="@{/bk/js/jquery.odometer.min.js}"></script>
        <script th:src="@{/bk/js/jquery-ui.min.js}"></script>
        <script th:src="@{/bk/js/jquery.appear.js}"></script>
        <script th:src="@{/bk/js/slick.min.js}"></script>
        <script th:src="@{/bk/js/ajax-form.js}"></script>
        <script th:src="@{/bk/js/wow.min.js}"></script>
        <script th:src="@{/bk/js/aos.js}"></script>
        <script th:src="@{/bk/js/plugins.js}"></script>
        <script th:src="@{/bk/js/main.js}"></script>
    </body>
</html>
